import React, { Component } from "react";
import "../assets/css/CartItem.css";
import login from "../hooks/loginInfo";

class CartItem extends Component {
  constructor(props) {
    super(props);

    this.state = {
      checked: false,
      timer: null,
      token: null,
    };
  }

  componentWillMount() {
    var loginInfo = login();
    this.setState({
      num: this.props.item.count,
      token: loginInfo.token,
    });
  }

  render() {
    return (
      <li className="CartItem">
        <div className="AddressItem_checkBox" onClick={()=>this.props.checkItem(this.props.item.sid)}>
          {this.props.item.checked ? (
            <i className="checked_active"></i>
          ) : (
            <i className="checked_no"></i>
          )}
        </div>
        <div className="CartItem_info">
          <img src={this.props.item.small_img} alt="" />
          <div className="ShopBagItem_text">
            <div>
              <div>
                <span className="ShopBagItem_text_name">
                  {this.props.item.name}
                </span>
                <span className="ShopBagItem_text_rule">
                  {this.props.item.rule}
                </span>
              </div>
              <span className="ShopBagItem_text_enname">
                {this.props.item.enname}
              </span>
            </div>
            <div className="ShopBagItem_text_bottom">
              <span className="ShopBagItem_text_price">
                ￥{this.props.item.price * this.props.item.count + ".00"}
              </span>
              <div className="CommodityDetail_content_introduce_num_stepper">
                <span onClick={() => this.props.changeNum(this.props.item.sid,"-")}></span>
                <span>{this.props.item.count}</span>
                <span onClick={() => this.props.changeNum(this.props.item.sid,"+")}></span>
              </div>
            </div>
          </div>
        </div>
      </li>
    );
  }
}

export default CartItem;
